<template>
  <div class="footerPurchase">
    <el-col :span="16" class="price">
      <span>零售价：{{ productInfo. productPrice }}元</span>
      
    </el-col>
    <el-col :span="8" class="purchase" @click.native="routerGo()">
      {{ buttonText }}
    </el-col>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  props: [ 'productInfo' ],
  watch: {
    productInfo: {
      deep: true,
      handler () {
        console.log('产品信息改变')
        console.log(this.productInfo)
      }
    }
  },
  data () {
    return {
      buttonText: '立即购买'
    }
  },
  methods: {
    routerGo () { // 路由跳转
      this.$router.push('/shopping/purchase')
    }
  },
  created () {
    console.log(this.productInfo)
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.footerPurchase {
  display: flex;
  justify-content: flex-start;
  line-height: 30px;
  border: 1px solid #eee;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 62px;
  width: 100%;
  .price {
    text-align: left;
    text-indent: 10px;
    padding: 5px 10px;
    color: red;
    font-size: 18px;
    span {
      font-size: 12px;
    }
  }
  .purchase {
    position: absolute;
    right: 0;
    padding: 5px 10px;
    background-color: #ff0000;
    color: #fff;
  }
}
</style>
